<template>
  <div class="login">
    <div class="con">
        <h3 class="text-center">登录</h3>
        <el-input placeholder="请输入账号" v-model="form.username" clearable></el-input>
        <el-input  placeholder="请输入密码" v-model="form.password" clearable show-password></el-input>
        <div class="text-center">
            <el-button type="primary" @click="login">登录</el-button>
        </div>
    </div>
  </div>
</template>
<script>
import { requserlogin} from "../../http/api"
import{mapActions} from "vuex"
export default {
components: {},
props: [],
data() {
return {
    form:{
    username:"",
    password:""                 
    }

};
},
methods: {
   ...mapActions({
      changeInfo: "changeInfo",
    }),
    //登录
     login() {
      // 2.1发请求
      requserlogin(this.form).then((res) => {
        if (res.data.code == 200) {
            //存信息
         this.changeInfo(res.data.list);
          //跳转页面
          this.$router.push("/index")
          
        }
      });
    },
},
mounted() {},
computed: {},
watch: {},
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.login{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right,@primary,@middle,@deep);
    position: relative;
}
.con{
    width: 350px;
    padding: @padding;
    background: #fff;
    border-radius: @radius;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
h3{
    margin-bottom: @padding;
}
.el-input{
    margin-bottom: @margin;
}
.text-center{
    text-align: center;
}
</style>
</style>